<template>
  <!--视图容器-->
  <el-container>
    <!--主要引用页面-->
    <el-main>
      <div ref="formBox" class="formBox">
        <el-form ref="params" :inline="true" :model="params" size="small">
          <el-form-item label="表单编号" prop="Code">
            <el-input
              v-model="params.Code"
              clearable
              placeholder="请输入表单编号"
            />
          </el-form-item>
          <el-form-item label="表单名称" prop="Name">
            <el-input
              v-model="params.Name"
              clearable
              placeholder="请输入表单名称"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick"
              >查询</el-button
            >
            <el-button
              type="primary"
              plain
              icon="el-icon-refresh"
              @click="resetClick('params')"
              >重 置</el-button
            >
            <el-button
              type="success"
              icon="el-icon-circle-plus"
              @click="FormAdd"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table
        ref="myTable"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        stripe
        :data="tableData"
        border
        style="width: 100%"
        :height="tableHeight"
      >
        <el-table-column type="index" align="center" label="序号" width="80" />
        <el-table-column
          align="left"
          show-overflow-tooltip
          prop="Code"
          label="表单编号"
          width="200"
        />
        <el-table-column
          align="left"
          show-overflow-tooltip
          prop="Name"
          label="表单名称"
          width="300"
        />
        <el-table-column
          align="left"
          show-overflow-tooltip
          prop="VerCode"
          label="表单版本号"
          min-width="300"
        />
        <el-table-column
          align="left"
          show-overflow-tooltip
          prop="Remark"
          label="表单备注"
          min-width="300"
        />
        <!-- <el-table-column align="center" label="是否启用" width="140px">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isenable"
              active-text=""
              inactive-text=""
              :active-value="1"
              :inactive-value="2"
              @change="isenable(scope.row.Id, scope.row.isenable)"
            />
          </template>
        </el-table-column> -->
        <el-table-column label="操作" align="center" width="330">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-edit-outline"
              @click="handleDesign(scope.row)"
              >设计</el-button
            >
            <el-button
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="handleEdit(scope.row)"
              >编辑
            </el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.Id)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        :page-size="params.size"
        :current-page="params.page"
        :page-sizes="[15, 20, 25, 30]"
        style="margin-top: 15px"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-main>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="35%"
      @close="close"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="表单编号" prop="Code">
          <el-input
            v-model="form.Code"
            clearable
            placeholder="请输入表单编号"
          />
        </el-form-item>
        <el-form-item label="表单名称" prop="Name">
          <el-input
            v-model="form.Name"
            clearable
            placeholder="请输入表单名称"
          />
        </el-form-item>

        <el-form-item label="表单版本号" prop="VerCode">
          <el-input
            v-model="form.VerCode"
            clearable
            placeholder="请输入表单版本号"
          />
        </el-form-item>
        <el-form-item label="表单备注" prop="Remark">
          <el-input
            v-model="form.Remark"
            type="textarea"
            :rows="4"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="onSubmit('form')"
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <!--主要引用页面结束-->
  </el-container>
  <!--内容结束-->
</template>
<script>
import API from "../API/CommonAPI.js";
export default {
  name: "FormList",
  data() {
    return {
      form: {
        Code: "",
        Name: "",
        VerCode: "",
        Remark: "",
      },
      rules: {
        Code: [{ required: true, trigger: "blur", message: "请输入表单编号" }],
        Name: [{ required: true, trigger: "blur", message: "请输入表单名称" }],
        VerCode: [
          { required: true, trigger: "blur", message: "请输入表单版本号" },
        ],
      },
      loading: false,
      title: "",
      dialogVisible: false,
      tableHeight: null,
      tableData: [],
      params: {
        Code: "",
        Name: "",
        page: 1,
        size: 15,
      },
      total: 0,
      listLoading: false,
    };
  },
  mounted() {
    const ythHeader = document.getElementsByClassName("fixed-header")[0];
    const clientHeight = ythHeader ? ythHeader.clientHeight : 0;
    this.tableHeight =
      window.innerHeight -
      this.$refs.formBox.offsetHeight -
      102 -
      clientHeight -
      (window.$wujie ? window.$wujie.props.layoutHeight : 0);
    window.onresize = () => {
      return (() => {
        this.tableHeight =
          window.innerHeight -
          this.$refs.formBox.offsetHeight -
          102 -
          clientHeight -
          (window.$wujie ? window.$wujie.props.layoutHeight : 0);
      })();
    };
  },
  created() {
    this.getList();
    // this.tableData.push({
    //     Code: "formOA",
    //     Name: "请假表单",
    //     VerCode: "1.0.0.0",
    //     Remark: "请假申请",
    // })
  },
  methods: {
    close() {
      this.$refs["form"].resetFields();
    },
    getList() {
      this.listLoading = true;
      API.FormPage({
        data: {
          Code: this.params.Code,
          Name: this.params.Name,
        },
        pagination: {
          page: this.params.page,
          rows: this.params.size,
          "sidx":"id",
          "sord":"desc"
        },
      })
        .then((res) => {
          this.listLoading = false;
          if (res.code == 200) {
            this.tableData = res.data.Items || [];
            this.total = res.data.TotalCount;
          } else {
            this.total = 0;
            this.tableData = [];
          }
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    isenable(Id, type) {
      var params = {
        Id: Id,
        isenable: type,
      };
      isenable(params).then((res) => {
        if (res.success) {
          this.getList();
          this.$message({
            message: "设置成功！",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg || "设置失败!",
            type: "error",
          });
        }
      });
    },
    onSubmit(Name) {
      this.$refs[Name].validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.form.Id) {
            API.FormEdit(this.form)
              .then((res) => {
                this.loading = false;
                if (res.code == 200) {
                  this.$message({
                    message: "保存成功!",
                    type: "success",
                  });
                  this.dialogVisible = false;
                  this.getList();
                } else {
                  this.$message({
                    message: res.info || "保存失败!",
                    type: "error",
                  });
                }
              })
              .catch((err) => {
                console.log(err);
                this.loading = false;
              });
          } else {
            API.FormAdd(this.form)
              .then((res) => {
                this.loading = false;
                if (res.code == 200) {
                  this.$message({
                    message: "保存成功!",
                    type: "success",
                  });
                  this.dialogVisible = false;
                  this.getList();
                } else {
                  this.$message({
                    message: res.info || "保存失败!",
                    type: "error",
                  });
                }
              })
              .catch((err) => {
                console.log(err);
                this.loading = false;
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增
    FormAdd() {
      this.title = "新增表单";
      this.dialogVisible = true;
      this.form = {
        Code: "",
        Name: "",
        VerCode: "",
        Remark: "",
      };
    },
    //编辑
    handleEdit(row) {
      this.title = "编辑表单";
      this.dialogVisible = true;
      this.form = {
        ...row,
      };
    },
    handleDesign(row) {
      this.$emit("jump", "App", row);
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.params.size = val;
      this.getList();
    },
    handleDelete(Id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        API.FormDelete({
          Id: Id,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.getList();
          } else {
            this.$message({
              message: res.info || "操作失败!",
              type: "error",
            });
          }
        });
      });
    },
    searchClick() {
      this.getList();
    },
    resetClick(Name) {
      this.$refs[Name].resetFields();
      this.getList();
    },
  },
};
</script>
<style>
</style>
